<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>公司年度月份销售额统计</title>
<link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css">
</head>
<body style="height: 100%; margin: 0">
	<!--  搜索条件开始 -->
	<form class="layui-form" method="post" id="searchFrm"
		lay-filter="searchFrm" style="padding-top: 20px;text-align: center;">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">选择年度</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" lay-verify="required"
						id="year" name="year" readonly="readonly">
				</div>
			</div>
			<div class="layui-inline">
				<button type="button" class="layui-btn layui-icon layui-icon-search"
					lay-submit="" lay-filter="doSearch" id="doSearch">查询</button>
			</div>
		</div>
	</form>
	<!-- 搜索条件结束-->
	<hr>
	<div id="container" style="height: 90%"></div>
	<hr>
	<script type="text/javascript"
		src="${ctx}/resources/echarts/js/echarts.min.js"></script>
	<script src="${ctx}/resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use(['laydate','form'], function() {
			var $ = layui.$;
			var laydate = layui.laydate;
			var form = layui.form;
			laydate.render({
				elem : '#year',
				type : 'year',
				value: new Date()
			});
			form.on("submit(doSearch)", function(data) {
				var year = data.field.year;
				getData(year);
			});
			//默认点击(若首次打开本页面没有数据，可能是这个点击事件在时间选择器渲染完之前就点击了，可以将这个点击事件，放到时间选择器渲染的回调函数中，具体查layui的文档)
			$("#doSearch").click();
			function getData(year){
				$.get("${ctx}/stat/loadAnnualMonthlySalesStatJson.action",
						{"year":year}, function(data) {
							var dom = document.getElementById("container");
							var myChart = echarts.init(dom);
							var app = {};
							option = null;
							option = {
							    title : {
									text : '汽车出租系统-公司'+year+'年度月份销售额统计',
									left : 'center'
								},
								color : [ '#3398DB' ],
								tooltip : {
									trigger : 'axis',
									axisPointer : { // 坐标轴指示器，坐标轴触发有效
										type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
									}
								},
							    xAxis: {
							        type: 'category',
							        data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
							    },
							    yAxis: {
							        type: 'value'
							    },
							    series: [{
							        name: '销售额',
							        data: data,
							        type: 'line'
							    }]
							};
							;
							if (option && typeof option === "object") {
							    myChart.setOption(option, true);
							}
						});
			}
		});
	</script>
</body>
</html>